<style scoped>
.split {
    height: calc(100vh - 140px);
    background: #ffffff;
    border: 1px solid #dcdee2;
}

.split-pane {
    padding: 10px;
}

/deep/.ivu-table-header thead tr th {
    background: #2db7f5 !important;
    font-size: 15px;
    color: #211f1f;
}

/deep/.ivu-table-fixed-header thead tr th {
    background: #2db7f5 !important;
    font-size: 15px;
    color: #211f1f;
}
</style>
<template>
    <div class="split">
        <div class="split-pane">
            <Card style="margin-bottom: 10px">
                <Form inline class="form-search">
                    <FormItem>
                        <Input v-model="keyword" placeholder="名称" style="width: 200px" />
                    </FormItem>
                    <FormItem>
                        <DatePicker style="width: 150px" type="date" format="yyyy年MM月dd日" placeholder="开始日期" :clearable="true" v-model="sdate"></DatePicker>
                    </FormItem>
                    <FormItem>
                        <DatePicker style="width: 150px" type="date" format="yyyy年MM月dd日" placeholder="结束日期" :clearable="true" v-model="edate"></DatePicker>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" @click="page = 1; SearchProduct();" icon="md-search">查询</Button>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" @click="ExportStatisticsProduct();" icon="md-search">导出</Button>
                    </FormItem>
                </Form>
            </Card>
            <Table ref="table" style="margin-bottom: 10px" border :loading="loadingTable" :columns="tableTitle" :data="tableData" :height="tableHeight"></Table>

            <Page :total="total" :current="page" :page-size="size" :page-size-opts="[10, 50, 100]" @on-change="(s) => { page = s; SearchProduct(); }" @on-page-size-change="(p) => { size = p; page = 1; SearchProduct(); }" show-total show-sizer />

            <Modal :width="1000" :footer-hide="true" v-model="purchaseModal" :title="tablePurchaseName" :mask-closable="false" draggable sticky>
                <Table ref="table" style="margin-bottom: 10px" border :loading="loadingPurchaseTable" :columns="tablePurchaseTitle" :data="tablePurchaseData" :height="tablePurchaseHeight"></Table>
                <Page :total="pruchaseTotal" :current="pruchasePage" :page-size="purchaseSize" :page-size-opts="[10, 50]" @on-change="(s) => {
                        page = s; searchProductPurchase();
                    }" @on-page-size-change="(p) => { purchaseSize = p; pruchasePage = 1; searchProductPurchase(); }" show-total show-sizer />
            </Modal>
            <Modal :width="1000" :footer-hide="true" v-model="saleorderModal" :title="tableSaleorderName" :mask-closable="false" draggable sticky>
                <Table ref="table" style="margin-bottom: 10px" border :loading="loadingSaleOrderTable" :columns="tableSaleOrderTitle" :data="tableSaleOrderData" :height="tableSaleOrderHeight"></Table>
                <Page :total="saleOrderTotal" :current="saleOrderPage" :page-size="saleOrderSize" :page-size-opts="[10, 50]" @on-change="(s) => {
                        page = s; SearchSaleOrderDetail();
                    }" @on-page-size-change="(p) => { saleOrderSize = p; saleOrderPage = 1; SearchSaleOrderDetail(); }" show-total show-sizer />
            </Modal>
        </div>
    </div>
</template>

<script>
import { GetTreeProductType, SearchStatisticsProduct, ExportStatisticsProduct } from "@/api/product";
import { SearchProductPurchaseDetail } from "@/api/purchaseorder";
import { SearchSaleOrderDetail } from "@/api/saleorder";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { InitProductTypeTree } from "@/libs/tools";
export default {
    name: "product",
    components: {
        Treeselect,
    },
    data() {
        return {
            split1: 0,
            total: 0,
            page: 1,
            size: 10,
            productId: 0,
            pruchaseTotal: 0,
            pruchasePage: 1,
            purchaseSize: 10,
            saleOrderTotal: 0,
            saleOrderPage: 1,
            saleOrderSize: 10,
            tableHeight: 450,
            tablePurchaseHeight: 450,
            tableSaleOrderHeight: 450,
            keyword: "",
            typeid: 0,
            sdate: null,
            edate: null,
            loadingTable: false,
            typeList: [],
            treeData: [],
            selectTreeData: [],
            tableTitle: [
                {
                    type: "index",
                    title: "序号",
                    align: "center",
                    width: 60,
                    // render: (h, params) => {
                    //     return h("span", params.index + (this.page - 1) * this.size + 1);
                    // },
                    indexMethod: (params) => {
                        return params._index + (this.page - 1) * this.size + 1;
                    }
                },
                {
                    key: "Name",
                    title: "名称",
                    minWidth: 150,
                    resizable: true,
                    align: "left",
                },
                {
                    key: "ExpirationDate",
                    title: "有效期至",
                    width: 120,
                    align: "center",
                    render: (h, params) => {
                        return h('span', {}, this.dayjs(params.row.ExpirationDate).format('YYYY-MM-DD'))
                    }
                },
                {
                    key: "Num",
                    title: "数量",
                    width: 80,
                    resizable: true,
                    align: "center",
                },
                {
                    key: "Specification",
                    title: "规格",
                    minWidth: 150,
                    resizable: true,
                    align: "left",
                },
                {
                    key: "PurchaseVisits",
                    title: "入库次数",
                    minWidth: 80,
                    resizable: true,
                    align: "center",
                    render: (h, params) => {
                        return h('a',
                            {
                                style: {
                                    color: params.row.PurchaseVisits >= 0 ? '#19be6b' : '#ed4014',
                                    fontSize: '14px',
                                    textDecoration: 'underline'
                                },
                                on: {
                                    click: () => {
                                        this.tablePurchaseName = ''
                                        this.tablePurchaseName = params.row.Name + '-入库记录';
                                        this.productId = params.row.Id;
                                        this.showPurchaseModel();
                                    }
                                }
                            },
                            params.row.PurchaseVisits
                        )
                    }
                },
                {
                    key: "PurchaseNum",
                    title: "入库数量",
                    minWidth: 80,
                    resizable: true,
                    align: "center",
                },
                {
                    key: "PurchaseAmount",
                    title: "入库金额(元)",
                    minWidth: 80,
                    resizable: true,
                    align: "center",
                },
                {
                    key: "SaleVisits",
                    title: "出库次数",
                    minWidth: 80,
                    resizable: true,
                    align: "center",
                    render: (h, params) => {
                        return h('a',
                            {
                                style: {
                                    color: params.row.SaleVisits >= 0 ? '#19be6b' : '#ed4014',
                                    fontSize: '14px',
                                    textDecoration: 'underline'
                                },
                                on: {
                                    click: () => {
                                        this.tableSaleorderName = ''
                                        this.tableSaleorderName = params.row.Name + '-处方记录';
                                        this.productId = params.row.Id;
                                        this.showSaleOrderModel();
                                    }
                                }
                            },
                            params.row.SaleVisits
                        )
                    }
                },
                {
                    key: "SaleNum",
                    title: "出库数量",
                    minWidth: 80,
                    resizable: true,
                    align: "center",
                },
                {
                    key: "SaleAmount",
                    title: "出库金额(元)",
                    minWidth: 80,
                    resizable: true,
                    align: "center",
                }
            ],
            tableData: [],
            purchaseModal: false,
            saleorderModal: false,
            loadingPurchaseTable: false,
            loadingSaleOrderTable: false,
            tablePurchaseTitle: [
                {
                    type: "index",
                    title: "序号",
                    align: "center",
                    width: 50,
                    // render: (h, params) => {
                    //     return h("span", params.index + (this.pruchasePage - 1) * this.purchaseSize + 1);
                    // },
                    indexMethod: (params) => {
                        return params._index + (this.pruchasePage - 1) * this.purchaseSize + 1;
                    }
                },
                {
                    key: "Manufacturer",
                    title: "生产厂家",
                    resizable: true,
                    align: "center",
                },
                {
                    key: "ManufacturingDate",
                    title: "生产日期",
                    resizable: true,
                    align: "center",
                    render: (h, params) => {
                        return h('span', {}, this.dayjs(params.row.ManufacturingDate).format('YYYY-MM-DD'))
                    }
                },
                {
                    key: "ExpirationDate",
                    title: "有效期至",
                    resizable: true,
                    align: "center",
                    render: (h, params) => {
                        return h('span', {}, this.dayjs(params.row.ExpirationDate).format('YYYY-MM-DD'))
                    }
                },
                {
                    key: "Price",
                    title: "单价",
                    resizable: true,
                    width: 80,
                    align: "center",
                },
                {
                    key: "Num",
                    title: "数量",
                    width: 80,
                    resizable: true,
                    align: "center",
                },
                {
                    key: "CreatedTime",
                    title: "入库时间",
                    resizable: true,
                    align: "center",
                    render: (h, params) => {
                        return h('span', {}, this.dayjs(params.row.CreatedTime).format('YYYY-MM-DD HH:mm:ss'))
                    }
                },

            ],
            tableSaleOrderTitle: [
                {
                    type: "index",
                    title: "序号",
                    align: "center",
                    width: 50,
                    // render: (h, params) => {
                    //     return h("span", params.index + (this.saleOrderPage - 1) * this.saleOrderSize + 1);
                    // },
                    indexMethod: (params) => {
                        return params._index + (this.saleOrderPage - 1) * this.saleOrderSize + 1;
                    }
                },
                {
                    key: "Manufacturer",
                    title: "生产厂家",
                    resizable: true,
                    align: "center",
                },
                {
                    key: "ManufacturingDate",
                    title: "生产日期",
                    resizable: true,
                    align: "center",
                    render: (h, params) => {
                        return h('span', {}, this.dayjs(params.row.ManufacturingDate).format('YYYY-MM-DD'))
                    }
                },
                {
                    key: "ExpirationDate",
                    title: "有效期至",
                    resizable: true,
                    align: "center",
                    render: (h, params) => {
                        return h('span', {}, this.dayjs(params.row.ExpirationDate).format('YYYY-MM-DD'))
                    }
                },
                {
                    key: "Price",
                    title: "单价",
                    resizable: true,
                    width: 80,
                    align: "center",
                },
                {
                    key: "Num",
                    title: "数量",
                    width: 80,
                    resizable: true,
                    align: "center",
                },
                {
                    key: "CreatedTime",
                    title: "处方时间",
                    resizable: true,
                    align: "center",
                    render: (h, params) => {
                        return h('span', {}, this.dayjs(params.row.CreatedTime).format('YYYY-MM-DD HH:mm:ss'))
                    }
                },

            ],
            tablePurchaseData: [],
            tableSaleOrderData: [],
            tablePurchaseName: '-入库记录',
            tableSaleorderName: '处方记录'
        };
    },
    computed: {},
    methods: {
        changeTree(a, b) {
            this.typeid = b.id;
            this.SearchProduct();
        },
        SearchProduct() {
            let vm = this;
            if (vm.sdate != null && vm.sdate != '') {
                if (vm.sdate === 'object') {
                    vm.sdate = vm.dayjs(vm.sdate).format('YYYY年MM月DD日')
                }
            }
            else {
                vm.sdate = null;
            }
            if (vm.edate != null && vm.edate != '') {
                if (vm.edate === 'object') {
                    vm.edate = vm.dayjs(vm.edate).format('YYYY年MM月DD日')
                }
            } else {
                vm.edate = null;
            }
            vm.loadingTable = true;
            var reqData = {
                keyword: vm.keyword,
                typeid: vm.typeid,
                page: vm.page,
                size: vm.size,
                sdate: vm.sdate,
                edate: vm.edate,
            };
            SearchStatisticsProduct(reqData).then((res) => {
                vm.loadingTable = false;
                var data = res.data;
                if (data.StatusCode == 200) {
                    vm.tableData = data.Data.Items;
                    vm.total = data.Data.TotalCount;
                } else {
                    vm.$Notice.error({
                        title: data.Errors,
                    });
                }
            });
        },
        ExportStatisticsProduct() {
            let vm = this
            if (vm.sdate != null && vm.sdate != '') {
                if (vm.sdate === 'object') {
                    vm.sdate = vm.dayjs(vm.sdate).format('YYYY年MM月DD日')
                }
            }
            else {
                vm.sdate = null;
            }
            if (vm.edate != null && vm.edate != '') {
                if (vm.edate === 'object') {
                    vm.edate = vm.dayjs(vm.edate).format('YYYY年MM月DD日')
                }
            } else {
                vm.edate = null;
            }
            var reqData = {
                keyword: vm.keyword,
                typeid: vm.typeid,
                sdate: vm.sdate,
                edate: vm.edate,
            };
            ExportStatisticsProduct(reqData).then((res) => {
                this.downloadfile(res)
            }).catch((err) => {
                vm.$Message.error({ title: '导出错误', content: err })
            })
        },
        downloadfile(res) {
            var blob = new Blob([res.data], { type: 'application/vnd.ms-excel;charset=utf-8' })
            var contentDisposition = res.headers['content-disposition']
            var patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
            var filename = "出入库统计.xlsx"
            if (contentDisposition != undefined) {
                var result = patt.exec(contentDisposition)
                filename = result[1]
            }
            var downloadElement = document.createElement('a')
            var href = window.URL.createObjectURL(blob) // 创建下载的链接
            var reg = /^["](.*)["]$/g
            downloadElement.style.display = 'none'
            downloadElement.href = href
            downloadElement.download = decodeURI(filename.replace(reg, '$1')) // 下载后文件名
            document.body.appendChild(downloadElement)
            downloadElement.click() // 点击下载
            document.body.removeChild(downloadElement) // 下载完成移除元素
            window.URL.revokeObjectURL(href)
        },
        GetTreeProductType() {
            let vm = this;
            GetTreeProductType(0).then((res) => {
                const data = res.data;
                if (data.StatusCode == 200) {
                    this.selectTreeData = InitProductTypeTree(data.Data);
                    this.treeData = [
                        {
                            id: 0,
                            label: "全部",
                            title: "全部",
                            value: 0,
                            expand: true,
                            children: this.selectTreeData,
                        },
                    ];
                } else {
                    vm.$Message.error({ title: "提示", content: data.Errors });
                }
            });
        },
        showPurchaseModel() {
            this.purchaseModal = true;
            this.searchProductPurchase();
        },
        showSaleOrderModel() {
            this.saleorderModal = true;
            this.searchSaleOrderDetail();
        },
        searchProductPurchase() {
            let vm = this;
            vm.loadingPurchaseTable = true;
            if (vm.productId == 0) {
                vm.$Notice.error({ title: "无法获取产品编码", });
            }
            var reqData = {
                productid: vm.productId,
                page: vm.pruchasePage,
                size: vm.purchaseSize,
            };
            SearchProductPurchaseDetail(reqData).then((res) => {
                vm.loadingPurchaseTable = false;
                var data = res.data;
                if (data.StatusCode == 200) {
                    vm.tablePurchaseData = data.Data.Items;
                    vm.pruchaseTotal = data.Data.TotalCount;
                } else {
                    vm.$Notice.error({
                        title: data.Errors,
                    });
                }
            });
        },
        searchSaleOrderDetail() {
            let vm = this;
            vm.loadingSaleOrderTable = true;
            if (vm.productId == 0) {
                vm.$Notice.error({ title: "无法获取产品编码", });
            }
            var reqData = {
                productid: vm.productId,
                page: vm.saleOrderPage,
                size: vm.saleOrderSize,
            };
            SearchSaleOrderDetail(reqData).then((res) => {
                vm.loadingSaleOrderTable = false;
                var data = res.data;
                if (data.StatusCode == 200) {
                    vm.tableSaleOrderData = data.Data.Items;
                    vm.saleOrderTotal = data.Data.TotalCount;
                } else {
                    vm.$Notice.error({
                        title: data.Errors,
                    });
                }
            });
        }
    },

    mounted() {
        this.tableHeight = window.innerHeight - 300;
        this.sdate = this.dayjs().subtract(1, 'month').date(1).format('YYYY年MM月DD日');
        this.edate = this.dayjs().format('YYYY年MM月DD日');
        //this.GetTreeProductType();
        this.SearchProduct();
    },
};
</script>
